<template>
  <div class="bg-white rounded-10px overflow-hidden">
    <div
      v-if="title"
      class="px-12px py-18px flex items-center border-b border-solid border-neutral-100"
    >
      <Icon :name="TodoIcon" :size="20" />
      <span class="ml-9px text-16px text-dark-300 font-500">{{ title }}</span>
    </div>
    <Form ref="vant-form" :show-error-message="false">
      <slot></slot>
    </Form>
  </div>
</template>

<script>
import { Form, Icon } from "vant";
import TodoIcon from "@/assets/icon/todo.png";
export default {
  props: {
    title: {
      type: String,
    },
  },
  components: {
    Form,
    Icon,
  },
  data() {
    return {
      TodoIcon,
    };
  },
  methods: {
    validate() {
      return this.$refs["vant-form"].validate();
    },
  },
};
</script>

<style lang="scss" scoped>
.form-container {
  @apply bg-white rounded-10px;
}
</style>
